<template>
	<div class="goods" id="goods" name="goods">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item to="/cart">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-else>分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑END -->

		<!-- 搜索栏 -->
		<div style="margin-top: auto;background-color: #EEEEEE;" class="line-height:700px">
			<p style="margin-left:30px;padding: 20px;">
				<font size="6">详细筛选:</font>
			</p>
			<el-form label-width="auto" size="medium" :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="作者:">
					<el-input v-model="formInline.author" placeholder="作品作者"></el-input>
				</el-form-item>
				<el-form-item label="风格:">
					<el-select v-model="formInline.style" placeholder="作品风格">
						<el-option label="风格一" value="shanghai"></el-option>
						<el-option label="风格二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="作品名：">
					<el-input v-model="formInline.productName" placeholder="作品名"></el-input>
				</el-form-item>
				<el-form-item label="价格区间:">
					<el-input v-model="formInline.minPrice" placeholder="小"></el-input>
				</el-form-item>——
				<el-form-item label="">
					<el-input v-model="formInline.MaxPrice" placeholder="大"></el-input>
				</el-form-item>
			</el-form>

			<div class="so" style="margin-left: 50px;padding-bottom:40px;width: 900px;">
				<el-input placeholder="请输入搜索内容" v-model="search_text">
					<el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
				</el-input>
			</div>
			
			<!-- 内容 -->
			<div style="margin-top: auto;">
				<el-row style="font-size:larger;background-color: #FFFFFF;">
					<el-col style="margin-left: 80px;margin-top: 1.875rem;" :span="4" v-for="item in productList" :key="item.id">
						<el-card shadow="hover">
							<div style="">
								<h1 style="color: black;">{{item.name}}</h1>
								<el-image style="width: 500px; height: 500px" :src="item.url" fit=fill></el-image>
								<h1 style="color: red;">￥{{item.price}}.00</h1>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			
		</div>

	</div>

</template>

<script>
	export default {
		name: "Search",
		components: {

		},
		data() {
			return {
				search:'',

				formInline: {
					author: '',
					style: '',
					productName: '',
					minPrice: '',
					MaxPrice: ''
				},

				search_text: '',
				productList: [{
						id: 1,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 2,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 3,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 4,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 5,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 6,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 7,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},
					{
						id: 8,
						name: "艾斯",
						price: 999999.00,
						url: "https://young-guli.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210202105406.png"
					},

				]
			}
		},
		created() {},
		methods: {
			onSubmit() {
				console.log('submit!');
			}
		}
	}
</script>

<style scoped>
	.goods {
		background-color: #f5f5f5;
	}

	/* 面包屑CSS */
	.el-tabs--card .el-tabs__header {
		border-bottom: none;
	}

	.goods .breadcrumb {
		height: 50px;
		background-color: white;
	}

	.goods .breadcrumb .el-breadcrumb {
		width: 1225px;
		line-height: 30px;
		font-size: 16px;
		margin: 0 auto;
	}

	/* 面包屑CSS END */

	/* 分类标签CSS */
	.goods .nav {
		background-color: white;
	}

	.goods .nav .product-nav {
		width: 1225px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
	}

	.nav .product-nav .title {
		width: 50px;
		font-size: 16px;
		font-weight: 700;
		float: left;
	}

	/* 分类标签CSS END */

	/* 主要内容区CSS */
	.goods .main {
		margin: 0 auto;
		max-width: 1225px;
	}

	.goods .main .list {
		min-height: 650px;
		padding-top: 14.5px;
		margin-left: -13.7px;
		overflow: auto;
	}

	.goods .main .pagination {
		height: 50px;
		text-align: center;
	}

	.goods .main .none-product {
		color: #333;
		margin-left: 13.7px;
	}

	/* 主要内容区CSS END */
</style>
